<template>
	<view class="content">
		<view style="height: auto;width: 100%;padding-left: 30rpx;padding-right: 30rpx;">
			<view v-for="(item, index) in certificates" :key="index" class="certificate"
				@click="change(item,$event,index)">
				<!-- <image class="image" src="/static/icon_home_menu_4.png"></image> -->
				<view class="info">
					<view class="certname">
						<text>{{item.certificateName}}</text>
					</view>
					<view class="certsource">
						<text>{{item.sourceType|formatStatus}}核销券</text>
					</view>
					<view class="desc">
						<text>使用说明:该团购券可使用范围仅限指定的门店，只适用于价值同等的套餐</text>
					</view>
				</view>
				<view class="jiazhi">
					<view class="price">
						<text>￥{{item.integral/100}}</text>
					</view>
				</view>
				<view class="select" v-if='type==1'>
					<view class="iconfont icon-radio selectclass" v-if="panduan!=index">
					</view>
					<view class="iconfont icon-radio-fill selectclass" v-if="panduan==index">
					</view>
				</view>
				<view class="used" v-if="item.certificateStatus==1&&type!=1">
					<image class="usedimg" src="http://m.quedou.cn/used.png"></image>
				</view>
			</view>
		</view>
		<view class="afrim" @click="use()" v-if='type==1'>使用该优惠券</view>
	</view>
</template>

<script>
	import '@/static/icon/iconfont.css';
	import Api from '@/common/api';
	export default {
		data() {
			return {
				certificates: [],
				panduan: 0,
				type: 0,
				certificate: null
			}
		},
		filters: {
			formatStatus(type) {
				if (type == 0) {
					return '抖音'
				}
				if (type == 1) {
					return '美团'
				}
				if(type == 2){
					return "优惠券"
				}
			}
		},
		onLoad(options) {
			let that = this;
			if (options.type == 1) {
				that.type = 1;
				that.getMyCertificate(options.storeId);
			}
		},
		methods: {
			use() {
				let certificate = this.certificate;
				uni.$emit('usecert', this.certificate)
				uni.navigateBack({
					delta: 1
				})
			},
			change(item, e, index) {
				console.log("=======" + index);
				this.panduan = index;
			},
			async getMyCertificate(storeId) {
				let params = {
					storeId: storeId
				}
				let data = await Api.apiCall('get', Api.certificate.listByStore, params);
				if (data) {
					console.log(data)
					this.certificates = data;
					this.certificate = data[0]
				}
			}
		}
	}
</script>

<style>
	page,
	.content {
		background: #f7f7f7;
		height: 100%;
	}

	.afrim {
		width: 650rpx;
		height: 80rpx;
		background-color:#40a74c;
		border-radius: 30rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #ffffff;
		line-height: 80rpx;
		text-align: center;
		position: fixed;
		bottom: calc(100% - 95%);
		margin-left: 40rpx;
	}

	.certificate {
		height: 230rpx;
		background-image:url(http://m.quedou.cn/youyou.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-top: 30rpx;
		padding: 16rpx;
		box-shadow: 0 0 10px #ffffff;
		display: flex;
		position: relative;
	}
	
	.desc {
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #d5ffdb;
	}

	.jiazhi {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.imageclass {
		width: 100rpx;
		height: 100rpx;
	}

	.info {
		width: 450rpx;
	}
	
	.used{
		position: absolute;
		right: 30rpx;
		top: 24rpx;
		z-index: 10;
	}
	
	.usedimg{
		width: 130rpx;
		height: 130rpx;
	}

	.image {
		width: 100%;
		height: 100%;
	}

	.selectclass {
		color: #ffffff;
	}

	.certname {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #d5ffdb;
	}

	.certsource {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #d5ffdb;
		padding-left: 16rpx;
	}

	.price {
		font-size: 50rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #fc5531;
	}

	.select {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20rpx;
	}
</style>
